<template>
  <div>
    <span>
      appName: {{ appName }}
    </span>
    <span>appVersion: {{ appVersion }}</span>
    <br>
    <button @click="handleChange">更新数据</button>
    <button @click="handleAction">模拟Action</button>
  </div>
</template>
<script type="text/javascript">
import { mapState, mapGetters, mapMutations, mapActions } from 'vuex'

 export default {
   name: 'store',
   data () {
     return {
       inputValue: ''
     }
   },
   components: {
   },
   computed: {
     appName() {
       console.log(this.$store.state.appName)
       return this.$store.state.appName
     },
     appVersion() {
       return this.$store.state.appVersion
     }
   },
   methods: {
     ...mapActions([
       'updateAppName'
     ]),
     handleInput(val) {
       this.inputValue = val
     },
     methodName(value) {
       console.log(value)
     },
     handleChange() {
       this.$store.commit("SET_APP_VERSION", "V2.0")
       this.$store.commit('SET_APP_NAME', "newAppName")
     },
     handleAction() {
       this.updateAppName()
     }
   }
 }
</script>
